<template>
  <jxtech-upload-single
    v-model:visible="visibleModelValue"
    :busi-id="busiId"
    :comp-id="compId"
    :item-type="itemType"
    :projectid="projectid"
    :upload-file-url="saveUploadFileUrl"
    :access-token="JxtechUploadSingleExtState.accessToken"
    :parentid="parentid"
    :disabled="disabled"
    :with-credentials="withCredentials"
    :accept="accept"
    @upload-success="JxtechUploadSingleExtState.onUploadSuccess"
    @upload-error="JxtechUploadSingleExtState.onUploadError"
    @upload-preview="JxtechUploadSingleExtState.onUploadPreview"
    @upload-remove="JxtechUploadSingleExtState.onUploadRemove"
    @upload-progress="JxtechUploadSingleExtState.onUploadProgress"
  ></jxtech-upload-single>
</template>

<script setup lang="ts" name="JxtechUploadSingleExt">
import { reactive, ref, Ref, watch, nextTick, computed } from "vue";
import { JxtechUploadSingle } from "@whjxtech/jxtech-component";
import { downloadFileUrl, saveUploadFileUrl } from "@/api/modules/org/file-attachment";
import { getAccessToken } from "@/utils/common";

interface JxtechUploadSingleExtProps {
  /**是否显示 */
  visible?: boolean;
  /**业务id */
  busiId: string;
  /**组件id */
  compId: string;
  /**业务类型 */
  itemType: string;
  /**电站id/项目id 可以不传但是建议传 */
  projectid?: string | number;
  /**父级id */
  parentid?: string | number;
  /**是否禁用 */
  disabled?: boolean;
  /**支持发送cookie凭证信息 */
  withCredentials?: boolean;
  /**支持上传文件类型 （thumbnail-mode 模式下此参数无效） */
  accept?: string;
}

const emit = defineEmits<{
  /**双向数据绑定 */
  (e: "update:visible", val: Boolean): void;
  /**上传成功触发事件 */
  (e: "upload-success", _response: any, _file: any, _fileList: any): void;
  /**上传失败触发事件 */
  (e: "upload-error", _response: any, _file: any, _fileList: any): void;
  /**点击预览触发事件 */
  (e: "upload-preview", _file: any): void;
  /**文件移除触发事件 */
  (e: "upload-remove", _file: any, _fileList: any): void;
  /**文件上传时的钩子 */
  (e: "upload-progress", _event: any, _file: any, _fileList: any): void;
}>();

const props = withDefaults(defineProps<JxtechUploadSingleExtProps>(), {
  visible: false,
  projectid: "1",
  disabled: false,
  withCredentials: false,
  accept: "txt,png,ppt,pptx,doc,docx,war,zip,bmp,gif,jpg,jpeg,xls,xlsx,pdf,mov,mp4,json,tif,dwg"
});

const visibleModelValue = computed({
  get() {
    return props.visible;
  },
  set(v) {
    emit("update:visible", v);
  }
});

const JxtechUploadSingleExtState = reactive({
  accessToken: getAccessToken() || "",
  onUploadSuccess: (_response: any, _file: any, _fileList: any) => {
    emit("upload-success", _response, _file, _fileList);
  },
  onUploadError: (_response: any, _file: any, _fileList: any) => {
    emit("upload-error", _response, _file, _fileList);
  },
  onUploadPreview: (_file: any) => {
    emit("upload-preview", _file);
  },
  onUploadRemove: (_file: any, _fileList: any) => {
    emit("upload-remove", _file, _fileList);
  },
  onUploadProgress: (_event: any, _file: any, _fileList: any) => {
    emit("upload-progress", _event, _file, _fileList);
  }
});
</script>

<style lang="scss" scoped></style>
